<template>
  <div>
     
    <el-carousel indicator-position="outside">
        
    <el-carousel-item v-for="(item,index) in lunboarr" :key="index" >
      <div class="rongqi">
      <div v-for="(itema,indexa) in item" :key="indexa" class="boxpic">
      <div class="pushimg">
              <a href="#" class="el-icon-video-play" @click="gethuayuid"></a> 
              <img :src="itema.picUrl" alt=""> 
      </div>
       
        <h4 class="textname">{{itema.name}}</h4>  
        <span class="playCount">播放量：{{itema.playCount}}</span>   
      </div>     
      </div>
      
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script>
import axios from 'axios'
// import  titleLi from "./titleLi"
export default {
name:"pushlunbo",
// props:["pushList"],
// components:{titleLi},
data() {
  return {
    imgsurl: [],
    lunboarr:[],
  };
},
methods: {
     getsongpush(){
  var that =this;
 axios.get("http://localhost:3000/personalized?limit=40" ).then(
            function(res){
              
                console.log(res.data.result);  //result[0].picUrl
               that.imgsurl=res.data.result;
               for(let i=0;i<that.imgsurl.length;i+=8){
                 that.lunboarr.push(that.imgsurl.slice(i,i+5));
               }
              //  console.log("kkkkkkkkkkkkkkkkkkkkkkkkk");
              //  console.log(that.lunboarr);  
            },function(error){
            console.log(error);
            }
        );
     },
     gethuayuid(){
      this.$store.dispatch('getHuayuPush');
     },
},
mounted() {
    this.getsongpush();
  },
}
</script>

<style>
/* ---------------------------走马灯--------------------- */
.el-carousel{
  width: 100%;
  height: 400px;
  overflow: hidden;
  /* background-color: #99a9bf; */
}
.el-carousel .el-carousel__item{ 
  height: 300px;
 margin-top: 10px;
  }
  
  .el-carousel__item:nth-child(2n) {
    /* background-color: #99a9bf; */
  }
  
  .el-carousel__item:nth-child(2n+1) {
    /* background-color: #d3dce6; */
  }
.rongqi{
   width:100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content:center;
 
   }
  
  .boxpic{
    width: 244px;
   height: 310px;
   /* background-color: red; */

  } 
  .boxpic h4{
    -ms-word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
    margin-top: 5px;
  }
  .boxpic span{
    font-size: 12px;
  }
  .pushimg{
     width: 224px;
   height: 224px;
   position: relative;
   overflow: hidden;
   }
   .pushimg a{
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 40px;
      transform: translate(-50%,-50%);
      color: white;
      display: none;
      transition-duration: 500ms;
      z-index:1;
      transition-timing-function: ease-in-out;
   }
   .boxpic .pushimg img{
     width: 224px;
   height: 224px;
   transition-duration: 500ms;
   transition-timing-function: ease-in-out;
   }
   .boxpic .pushimg:hover img{
     transform:scale(1.2);
   }
   .boxpic .pushimg:hover a{
     transform:scale(1.3);
     
     display: block;
   }
</style>